import {AutoTable, i18n, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcObject, PlcOv, PlcSelect, SelectOption} from "plain-design";
import {designPage} from "@peryl/react-compose";
import {useTableOption} from "../../modules/plain-design/useTableOption";
import {usePageService} from "../../modules/micro/usePageService";

export default designPage(() => {

  // usePageTitle('查询列表')
  // usePageButton({ label: '保存', seq: 99, primary: true, handler: () => {$message.primary('保存');} });

  const { nav } = usePageService();

  const option = useTableOption({
    url: '/demo',
    fill: true,
  });

  const parentOption = useTableOption({
    url: '/demo',
    render: () => <>
      <Plc title="编号id" field="id"/>
      <PlcInput title="文本normalText" field="normalText" fixed="left"/>
    </>
  });

  const onClick = (val: any) => {
    const row = val.scope.row;
    nav.push('react-base/demo-list/detail-page', { row });
  };

  const selectOptions = [
    { label: i18n.$intl('page.listPage.selectOption.customer').d('消费者'), status: 'consumer' },
    { label: i18n.$intl('page.listPage.selectOption.potential').d('潜在客户'), status: 'potential' },
    { label: i18n.$intl('page.listPage.selectOption.store').d('门店'), status: 'store' },
  ];

  const renderSelectOption = () => selectOptions.map((item) => (
    <SelectOption label={item.label} val={item.status} key={item.status}/>
  ));

  return () => (
    <AutoTable option={option}>
      <Plc title={i18n.$intl('page.listPage.field.id').d('编号')} field="id" link onClick={onClick} hideInForm/>
      <PlcDate title={i18n.$intl('page.listPage.field.createdAt').d('创建时间')} field="createdAt" hideInForm width={150} editable={false} datetime/>
      <PlcDate title={i18n.$intl('page.listPage.field.updatedAt').d('更新时间')} field="updatedAt" hideInForm width={150} editable={false} datetime/>
      <PlcObject title={i18n.$intl('page.listPage.field.parentName').d('父对象')} field="parentName" width={150} option={parentOption} map={{ parentId: 'id', parentName: 'normalText' }} labelField="normalText"/>
      <PlcDate title={i18n.$intl('page.listPage.field.dateVal').d('日期')} field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
      <PlcOv title={i18n.$intl('page.listPage.field.ovVal').d('选项值')} field="ovVal" ov="promotion"/>
      <PlcAddress
        provinceField="provinceVal"
        cityField="cityVal"
        districtField="districtVal"
      />
      <PlcNumber title={i18n.$intl('page.listPage.field.count').d('计数')} field="count" required/>
      <PlcInput title={i18n.$intl('page.listPage.field.normalText').d('文本')} field="normalText" required width={100} fixed="left" overflowTooltip/>
      <PlcNumber title={i18n.$intl('page.listPage.field.numberVal').d('数字')} field="numberVal"/>
      <PlcSelect title={i18n.$intl('page.listPage.field.selectVal').d('下拉选择')} field="selectVal">{renderSelectOption()}</PlcSelect>
      <PlcSelect title={i18n.$intl('page.listPage.field.arrayJsonConvert').d('Json数组(convert)')} field="arrayJson" multiple width={200} required>{renderSelectOption()}</PlcSelect>
      <PlcSelect title={i18n.$intl('page.listPage.field.arrayStringConvert').d('String数组(convert)')} field="arrayString" multiple width={200} required>{renderSelectOption()}</PlcSelect>
      <PlcSelect title={i18n.$intl('page.listPage.field.arrayJson').d('Json数组')} field="arrayJsonStr" multiple valueType="arrayjson" width={200} required>{renderSelectOption()}</PlcSelect>
      <PlcSelect title={i18n.$intl('page.listPage.field.arrayString').d('String数组')} field="arrayStringStr" multiple valueType="arraystring" width={200} required>{renderSelectOption()}</PlcSelect>

      <PlcInput title={i18n.$intl('page.listPage.field.email').d('邮箱(校验)')} field="email" validateType="email"/>
    </AutoTable>
  );
});
